<div class="tuleap-modal-background">
</div>
<div class="tuleap-modal tuleap-modal-pimped">
    <div class="tuleap-modal-side-panel">
        <div class="tuleap-modal-side-panel-grip">
            <span>{{ artifact_links_title }}</span>
        </div>
        <div class="tuleap-modal-side-panel-content">
            <div class="modal-header modal-header-side-panel">
                <h4 class="artifact-links-title">{{ artifact_links_title }}</h4>
            </div>
            <div class="tuleap-modal-side-panel-content-content modal-body">
                {{# parent_artifact_presenter }}
                    <p class="artifact-modal-artifact-link">
                        {{ parent_artifact_label }} <a href="{{ uri }}">{{ xref }}</a>
                    </p>
                {{/ parent_artifact_presenter }}
                <div class="alert alert-info">{{{ artifact_links_readonly }}}</div>
                <ul class="tracker_artifact_links">
                {{# artifact_links }}
                    <li class="artifact-modal-artifact-link">
                        <a href="/goto?key={{ tracker_name }}&val={{ artifact_id }}&group_id={{ group_id }}" class="cross-reference">#{{ artifact_id }} {{ title }}</a>
                    </li>
                {{/ artifact_links }}
                {{^ artifact_links }}
                    <li class="empty-state">
                        {{ no_artifact_links }}
                    </li>
                {{/ artifact_links }}
                </ul>
            </div>
            <div class="tuleap-modal-side-panel-content-actions modal-footer">
            </div>
        </div>
    </div>

    <div class="tuleap-modal-main-panel">
        <form enctype="multipart/form-data">
            <div class="tuleap-modal-title modal-header modal-header-with-side-panels">
                <i class="tuleap-modal-close close">×</i>
                <h3>{{ artifact_title }}</h3>
            </div>
            <div class="tuleap-modal-content modal-body">
                <div id="artifact-form-errors" class="alert alert-error">
                    <h5></h5>
                    <ul></ul>
                </div>
                <div>
                    <table cellspacing="0" cellpadding="0" border="0">
                        <tr valign="top">
                            <td>
                                {{{ form_elements }}}
                            </td>
                        </tr>
                    </table>
                </div>
                <input type="hidden" id="artifact_informations"
                       data-artifact-id="{{ artifact_id }}"
                       data-changeset-id="{{ last_changeset_id }}"/>
                <input type="hidden" name="from_overlay" value="1">
            {{{ javascript_rules }}}
            </div>
            <div class="tuleap-modal-actions modal-footer">
                <textarea id="tracker_followup_comment_new"  class="user-mention" name="artifact_followup_comment" placeholder="{{ add_followup_placeholder }}"></textarea>
                <div>
                    <a class="btn tuleap-modal-close">{{ cancel }}</a>
                    {{# user_is_logged_in }}
                        <input type="submit" id="tuleap-modal-submit" class="btn btn-primary" data-normal-text="{{ submit }}" data-loading-text="{{ submit }}..." value="{{ submit }}">
                    {{/ user_is_logged_in }}
                </div>
            </div>
        </form>
    </div>

    <div class="tuleap-modal-side-panel">
        <div class="tuleap-modal-side-panel-grip">
            <span>{{ followups_title }}</span>
        </div>
        <div class="tuleap-modal-side-panel-content">
            <div class="modal-header modal-header-side-panel">
                <h4 class="followups-title">{{ followups_title }}</h4>
            </div>
            <div class="tuleap-modal-side-panel-content-content modal-body">
                {{{ follow_ups }}}
            </div>
            <div class="tuleap-modal-side-panel-content-actions modal-footer">
            </div>
        </div>
    </div>
</div>
